<template>
    <div>
    <div class="m-videoList m-videoList1">
      <div class="box-items">
        <h2 class="c-title-des">电视剧</h2>
      </div>
      <div class="m-pic-horizontalNew" v-show="new11">
        <ul class="m-pic-list" >
          <li
            v-for="(item, index) in tvtelevisionarr1"
            :key="index"
            class="tv"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
       <div class="m-pic-horizontalNew" v-show="new21">
        <ul class="m-pic-list">
          <li
            v-for="(item, index) in tvtelevisionarr2"
            :key="index"
            class="tv"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="barte">
        <div class="m-link">
          <van-icon name="play-circle-o" />更多电视剧</div>
        <div class="m-link" @click="show1" ><van-icon name="replay" />换一批</div>
      </div>
    </div>
    <div class="m-videoList m-videoList1">
      <div class="box-items">
        <h2 class="c-title-des">电影</h2>
      </div>
      <div class="m-pic-horizontalNew" v-show="new12">
        <ul class="m-pic-list" >
          <li
            v-for="(item, index) in dytelevisionarr1"
            :key="index"
            class="tv tvs1"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
       <div class="m-pic-horizontalNew" v-show="new22">
        <ul class="m-pic-list">
          <li
            v-for="(item, index) in dytelevisionarr2"
            :key="index"
            class="tv tvs1"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="barte">
        <div class="m-link">
          <van-icon name="play-circle-o" />更多电影</div>
        <div class="m-link" @click="show2" ><van-icon name="replay" />换一批</div>
      </div>
    </div>
    <div class="m-videoList m-videoList1 m-videm">
      <div class="box-items">
        <h2 class="c-title-des">动漫</h2>
      </div>
      <div class="m-pic-horizontalNew" v-show="new13">
        <ul class="m-pic-list" >
          <li
            v-for="(item, index) in dmtelevisionarr1"
            :key="index"
            class="tv"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
       <div class="m-pic-horizontalNew" v-show="new23">
        <ul class="m-pic-list">
          <li
            v-for="(item, index) in dmtelevisionarr2"
            :key="index"
            class="tv"
          >
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="barte">
        <div class="m-link">
          <van-icon name="play-circle-o" />更多动漫</div>
        <div class="m-link" @click="show3" ><van-icon name="replay" />换一批</div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            new11: true,
            new21:false,
            new12: true,
            new22:false,
            new13: true,
            new23:false,
            tvtelevisionarr1:[],
            tvtelevisionarr2:[],
            dytelevisionarr1:[],
            dytelevisionarr2:[],
            dmtelevisionarr1:[],
            dmtelevisionarr2:[
                        
                    ],
        }
    },
    methods: {
        show1() {
          if (this.new11 == true) {
            this.new21 = true;
            this.new11 = false;
          } else {
              this.new21 = false;
            this.new11 = true;
          }
        },
        show2() {
          if (this.new12 == true) {
            this.new22 = true;
            this.new12 = false;
          } else {
              this.new22 = false;
            this.new12 = true;
          }
        },
        show3() {
          if (this.new13 == true) {
            this.new23 = true;
            this.new13 = false;
          } else {
              this.new23 = false;
            this.new13 = true;
          }
        }
    },
    mounted () {
        this.$axios.get("/api/tvtelevisionarr1").then((data) => {
          var tvtelevisionarrs1 = data.data
          tvtelevisionarrs1.forEach((item) => {
              item.img = require('../assets/' + item.img);
              item.images1 = require('../assets/' + item.images1);  
          })
          this.tvtelevisionarr1 = tvtelevisionarrs1
        })
    
    
       this.$axios.get("/api/tvtelevisionarr2").then(data => {
         var tvtelevisionarrs2 = data.data
         tvtelevisionarrs2.forEach(item => {
           item.img = require("../assets/" + item.img)
           item.images1 = require("../assets/" + item.images1)
         })
         this.tvtelevisionarr2 = tvtelevisionarrs2
       })


       this.$axios.get("/api/dytelevisionarr1").then(data => {
         var dytelevisionarrs1 = data.data
         dytelevisionarrs1.forEach(item => {
           item.img = require("../assets/" + item.img)
           item.images1 = require("../assets/" + item.images1)
         })
         this.dytelevisionarr1 = dytelevisionarrs1
       })



       this.$axios.get("/api/dytelevisionarr2").then(data => {
         var dytelevisionarrs2 = data.data
         dytelevisionarrs2.forEach(item => {
           item.img = require("../assets/" + item.img)
           item.images1 = require("../assets/" + item.images1)
         })
         this.dytelevisionarr2 = dytelevisionarrs2
       })



       this.$axios.get("/api/dmtelevisionarr1").then(data => {
         var dmtelevisionarrs1 = data.data
         dmtelevisionarrs1.forEach(item => {
           item.img = require("../assets/" + item.img)
           item.images1 = require("../assets/" + item.images1)
         })
         this.dmtelevisionarr1 = dmtelevisionarrs1
       })


      this.$axios.get("/api/dmtelevisionarr2").then(data => {
         var dmtelevisionarrs2 = data.data
         dmtelevisionarrs2.forEach(item => {
           item.img = require("../assets/" + item.img)
           item.images1 = require("../assets/" + item.images1)
         })
         this.dmtelevisionarr2 = dmtelevisionarrs2
       })

    }



}
</script>

<style>
    /* 分类 */
.m-pic-list .tv {
  width: 32%;
  height: 1.52rem;
  padding-left: 0.05rem;
  margin-bottom: 0.5rem;
}
.tv .piclist-img {
  width: 1.09rem;
  height: 1.52rem;
}
.tv .c-rb span {
  font-size: 0.12rem;
  color: #fff;
}
.tv .c-title {
  line-height: 0.35rem;
}
.tvs1 .c-rb span{
    color: #ff6e0d !important;
}
.m-videm {
  padding-bottom: .23rem;
}
</style>